<html>

<head>
  <meta charset="utf-8">
  <title>HTML 文档结构</title>
</head>

<body>
  <div class="group">
    <input type="text" class="todovalue" name="todovalueName" id="todovalueId" placeholder="请输入todo内容"
           onkeydown="valueChange(event)" />
    <input type="button" value="BUTTON2" onclick="handleClick()"></input>
    <button type="button" id="button3">BUTTON3</button>
    <!-- 遍历数据 -->
    <div id="todoList">
    </div>
  </div>
</body>
<script lang="javascript">
    var index = 0;
    function init() {
        document.getElementById("button3").onclick = handleClick;
        // document.getElementById("input").addEventListener('keyup', function (event) {
        //     if (event.keyCode == 13) {
        //         var v = document.getElementById("todovalueId").value;
        //         console.log(v);
        //         //这里写事件，例如写个 a();
        //     }
        // });
        //  document.getElementById("input").onkeydown = valueChange;
    }

    function valueChange(e) {
        console.log(e);
        if (event.keyCode == 13) {
            handleClick();
        }
    }

    var index = 0
    function handleClick() {
        var temp = document.getElementsByName("todovalueName")[0].value;
        // alert("我被按了" + temp);
        // var t = document.getElementById("todoList").innerHTML;
        // document.getElementById("todoList").innerHTML = t + "<div>" + temp + "</div>";
        var div = document.createElement("div");
        // div.innerText = temp;

        var t = "<div class='item' id='item"+index+ "'>"
            + "  <input class='item-chk' type='checkbox' />"
            + "  <div  class='item-sp'>" + temp + "</div>"
            + "  <input id='item-del-"+index+"' class='item-del' type='button' value='删除' onclick='handleDelClick("+index+")'></input>"
            + " </div>"

        index++;
        // div.innerHTML
        // document.getElementById("todoList").innerHTML += div;
        document.getElementById("todoList").innerHTML += t
    }

    function test1(index) {
        // console.log("test12111");
        // document.getElementById("todoList").children[index].style = "background-color:red";
        // document.getElementById("item-del-"+index).style = "opacity: 1;";
    }

    function test2(index) {
        // console.log("22222222");
        // document.getElementById("todoList").children[index].style = "";
        // document.getElementById("item-del-"+index).style = "opacity: 0;";
    }

    function handleDelClick(index) {
        var arr = document.getElementById("todoList");
        console.log(arr);
        document.getElementById("item" + index).remove();

        // document.getElementById("todoList").removeChild(arr.childNodes[index]);
    }

    init();
    // alert("test");
</script>
<style>
  body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }

  .group{
    border: 1px solid blue;
    padding: 10px;

    border-radius: 20px;
  }

  .item {
    margin: 3px;
    padding: 3px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    }

  .item:hover {
    background-color:aliceblue;

    transform: scale(1.2);
  }

  .item-sp {
    flex-grow: 1;
  }

  .item-del {
    background-color: black;
    border: 0px;
    color: bisque;

    opacity: 0;
  }

  .item-del:hover {
    opacity: 1;
  }

  .todovalue{
    border: 2px solid #5c6b86;
    padding:6px;
    outline: none;
  }

  .todovalue:focus {
    box-shadow: 0px 0px 5px #5c6b86;
    border: 2px solid  #5c6b86;
    outline:none;
  }

</style>

</html>



